<template>
  <Card style="margin-top:12px;">
    <p slot="title">隐患解决率</p>
    <div class="chart" id="chart-danger-resolve"></div>
    <Divider />
    <span class="text">待解决的隐患告警：{{count}}个</span>
    <Spin v-show="loading" fix size="large" />
  </Card>
</template>

<script>
import axios from 'axios'
export default {
  name: "",
  data() {
    return {
      option: null,
      count: 0,
      loading: false
    };
  },
  mounted() {
      this.renderChart_resolve();
  },
  methods: {
    renderChart_resolve() {
      this.loading = true;
      this.option = {
        legend: {
          top: "top",
          left: "center",
          orient: "horizontal",
          data: ["未解决的隐患告警", "已解决的隐患告警"],
          textStyle: { fontSize: 12 },
          itemWidth: 12,
          itemHeight: 12
        },
        tooltip: { show: true, trigger: "item", formatter: "{a} - {b}:{c}" },
        color: [this.COLORS[7], "#999"].reverse(),
        series: [
          {
            name: "隐患告警解决情况",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}:{c}个"
              }
            }
          }
        ]
      };
      let params = {
        startTime: this.dateShift(0) + " 00:00:00",
        endTime: this.dateShift(0) + " 23:59:59",
        pageIndex:0,
        pageSize:10
      };
      axios
        .get(this.URLHEAD_TA + "GetDangerResoslvedOrNot", { params: params })
        .then(res => {
          let json = res.data;
          this.option.series[0].data = [
            {
              name: "未解决的隐患告警",
              value: json.Data.unResolvedAdd
            },
            {
              name: "已解决的隐患告警",
              value: json.Data.resolvedAdd
            }
          ];
            this.count = json.Data.unResolvedAdd
          this.$Crender("chart-danger-resolve", this.option);
          this.loading = false;
        });
    }
  }
};
</script>

<style scoped>
.chart{
    height: 350px;
}
</style>